<template>
  <div class="wrapper">
    <div class="time">
      <div class="time-data">
        <span>{{ getParseStamp() }}</span>
        <div class="lunar">
          <span>{{ getWeek }}</span>
          <span style="margin-left: 20px;">农历{{ getCalendar.dateStr }}</span>
        </div>
      </div>
      <div class="now">
        <span>{{ now }} </span>
        <el-button class="sign" v-if="signBut" @click="dutySignIn"><img src="../../../../../assets/img/sign.png"
            alt="">签到</el-button>
        <el-button :class="signOut" v-if="signOutBut" @click="signOut">
          <img src="../../../../../assets/img/signOut.png" alt="">{{ '签退' }}
        </el-button>
        <el-button v-show="accomplishBut" disabled>已签退</el-button>
      </div>
    </div>
    <div class="box">
      <div class="calendar-date">
        <el-date-picker v-model="tiemDate" prefix-icon=" " :disabled="activeName == '值班打卡' || activeName == '交接班'"
          type="month" align="center" :clearable="false" :placeholder="getParseStamp(tiemDate, 'YYYY年MM月')"
          format="yyyy年MM月" :editable="false" ref="datePick">
        </el-date-picker>
      </div>
      <ul class="calendar-ul">
        <li class="calendar-li">周日</li>
        <li class="calendar-li">周一</li>
        <li class="calendar-li">周二</li>
        <li class="calendar-li">周三</li>
        <li class="calendar-li">周四</li>
        <li class="calendar-li">周五</li>
        <li class="calendar-li">周六</li>
      </ul>
      <el-calendar v-model="tiemDate" ref="calendar" :first-day-of-week=7 :class="!searchShow ? 'cut-tabs' : ''">
        <template slot="dateCell" slot-scope="{date, data}">
          {{
            data.type == "current-month" ? data.day.split('-')[2].slice(0, 1) == "0" ?
            data.day.split('-')[2].slice(1) : data.day.split('-')[2] : ""
          }}
        </template>
      </el-calendar>
      <div class="inquire">
        <filterTitle class="filterTitle" @query="query" @reset="reset" :form="form" :formData="formData"
          ref="filterTitle">
        </filterTitle>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="值班计划" name="值班计划"></el-tab-pane>
        <el-tab-pane label="值班打卡" name="值班打卡"></el-tab-pane>
        <el-tab-pane label="交接班" name="交接班"></el-tab-pane>
        <el-tab-pane label="值班日报" name="值班日报"></el-tab-pane>
        <el-tab-pane label="值班日志" name="值班日志"></el-tab-pane>
      </el-tabs>
      <div class="tabs">
        <div class="tabs-data">
          <div class="tabs-title">
            <div class="blue"></div>
            <span class="tabs-txt">{{ activeName }}</span>
          </div>
          <div style="padding-left: 20px;">
            <div class="tabs-label">值班单位：<span>{{ dutyMsg.dutyUnit }}</span></div>
            <div class="tabs-label">值班电话：<span>{{ dutyMsg.dutyPhone }}</span></div>
          </div>
        </div>
        <template>
          <div class="tabs-data" v-for="(item, i) in tabsList" :key="i">
            <div class="density">
              <span class="tabs-txt">班次</span>
              <span>{{ item.shiftTimeString }}</span>
            </div>
            <div style="margin-bottom: 50px;">
              <DexTable :config="tableConfig" :data="item.tableData" :flex="false" :withPage="false">
                <!-- 签到时间 -->
                <!-- <template #signTime="scope">
                  <p v-if="scope.row.signTime">{{ scope.row.signTime }}</p>
                  <p v-if="account.id == scope.row.dutyPersonId && !scope.row.signTime" class="hover" @click="dutySignIn">
                    签到
                  </p>
                </template> -->
                <!-- 签退时间 -->
                <!-- <template #signOutTime="scope">
                  <p v-if="scope.row.signTime && scope.row.signOutTime">{{ scope.row.signOutTime }}</p>
                  <p v-if="account.id == scope.row.dutyPersonId && !(scope.row.signTime && scope.row.signOutTime)"
                    class="hover" @click="signOut">{{ scope.row.signTime ? '签退' : '' }}</p>
                </template> -->
                <template #operate="scope">
                  <p class="hover" v-if="scope.row.isBigLeader == 1" @click="rightDetail(scope.row.dutyUserId)"> 查看</p>
                  <!-- <template v-else> -->
                  <p class="hover" v-if="scope.row.status == 1 && scope.row.isApproved == 1"
                    @click="rightDetail(account.id)">
                    审批</p>
                  <div v-else-if="scope.row.status == 3">
                    <p class="hover" @click="preview(scope.row.dutyUserId)">预览</p>
                    <p class="hover" @click="downloadWord(scope.row.dutyUserId)">下载</p>
                  </div>
                  <p class="hover"
                    v-if="(scope.row.status == 0 || scope.row.status == 2) && account.id == scope.row.dutyUserId"
                    @click="rightDetail(account.id)">
                    编辑</p>
                  <!-- </template> -->
                </template>
                <template #jbOperate="scope">
                  <div
                    v-if="(roleCode.indexOf('operator_staff') != -1 || roleCode.indexOf('operator_leader') != -1) && account.id == scope.row.approvalUserId">
                    <p class="hover" @click="handover(1, scope.row.id)" v-if="scope.row.reportApprovalStatus == '未接班'">接班
                    </p>
                    <p class="hover" @click="handover(2, scope.row.id)" v-if="scope.row.reportApprovalStatus == '已接班'">交班
                    </p>
                  </div>
                  <p class="hover" @click="handover(3, scope.row.id)">详情</p>
                </template>
              </DexTable>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 预览 -->
    <LsdDialog :dialogConfig="previewDialog" @close="closePreviewDialog">
      <PreviewDialog slot="dialog" :previewData="previewData" :dutyType="previewType" />
    </LsdDialog>
    <!-- 交接班 -->
    <LsdDialog :dialogConfig="handover_dialog" @handleBtn="handoverBtn" @close="closeHandoverDialog">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="handoverActive">
        <div slot="slot1">
          <el-descriptions>
            <el-descriptions-item label="值班单位">{{ connectDialog.unit }}</el-descriptions-item>
            <el-descriptions-item label="值班电话">{{ connectDialog.dutyPhone }}</el-descriptions-item>
          </el-descriptions>
          <DexTable :config="handoverConfig" :data="handoverData" :flex="false" :showIndex="false" :withPage="false"
            :span-method="spanMethod" />
        </div>
        <div slot="slot2">
          <!--  1 接班  2交班   3详情 -->
          <el-input type="textarea" :disabled="handoverType != 2" :rows="5" autosize resize="none"
            v-model="shiftConsiderations"></el-input>
        </div>
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>
<script>
import { getLunar } from "chinese-lunar-calendar";
import { getUntilList } from "@/api/common.js";
import { jhTableConfig, dkTableConfig, rbTableConfig, jbTableConfig, handoverConfig } from "./confin";
import DexTable from "@/components/DexTable.vue";
import PreviewDialog from "./previewDialog.vue";
import { parseStamp } from "@/utils/public.js";
import Docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import JSZip from "jszip";
import JSZipUtils from "jszip-utils";
import { getDetail, dutySignIn, dutySignOut, getLeftDutyNewspaper, getLeftDutyPlan, getLeftDutyClock, getLeftDutyHandover, getShiftTableApi, dutyShift } from "@/api/duty/daily/plan.js";
import { getExistingNum, getAddNum } from "../dutyRinght/confin";
export default {
  components: {
    DexTable,
    PreviewDialog
  },
  data() {
    return {
      account: "",
      unitOrg: "",
      tiemDate: new Date(),
      now: "",
      now_timer: null,
      form: {
        unitId: "",
        unitName: ""
      },
      formData: [{
        elType: "lsdTree",
        id: "unitName",
        name: "unitId",
        label: "所属单位",
        keyWord: "keyWord",
        treeRef: "treeRef",
        commonClick: true,
        span: 24,
        attrs: {
          value: "",
          size: "small",
          clearable: true,
          filterable: true,
          "collapse-tags": true
        },
        options: {
          attrs: {
            value: ""
          }
        },
        treeData: {
          attrs: {
            data: []
          },
          props: {
            children: "children",
            label: "orgName",
            value: "id"
          }
        }
      }],
      searchShow: true,
      activeName: "值班计划",
      activeNum: 1,
      tabsList: [],
      tableConfig: jhTableConfig,
      dutyMsg: {
        dutyPhone: "",
        dutyUnit: ""
      },
      previewDialog: { // 预览弹窗
        title: "值班日报",
        isShow: false
      },
      previewType: "DutyLog",
      handoverActive: ["1", "2", "3"],
      titleConfig: [
        {
          title: "值班信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "交接班事项说明",
          name: "2",
          slot: "slot2"
        }
      ],
      handover_dialog: { // 交接弹窗
        title: "交接班",
        isShow: false,
        btnList: []
      },
      handoverConfig,
      handoverData: [],
      shiftConsiderations: "1、值班期间突发事件预警及应急响应进展情况。\n2、上级指示和要求、文件接收和需后续人员办理的事项。\n3、值班场所通信、自动化及办公设备异常和缺陷情况。\n4、通过新一代应急指挥系统灾情信息监测、设备设施状态监测等模块进行事件监测及处置情况。\n5、通过新一代应急指挥系统应急资源基础信息数据库进行应急基础资源核查情况，重点说明资源数据异常和变动情况",
      handoverType: 1,
      getExistingNum,
      getAddNum,
      previewData: {},
      connectDialog: {
        dutyPhone: "",
        unit: ""
      },
      spanArr: [],
      position: 0,
      signBut: false,
      signOutBut: false,
      accomplishBut: false
    };
  },
  computed: {
    getWeek() {
      const weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      return weekDay[new Date().getDay()];
    },
    getCalendar() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const date = new Date().getDate();
      return getLunar(year, month, date);
    },
    roleCode() {
      return JSON.parse(sessionStorage.getItem("role"))?.roleCode;
    }
  },

  mounted() {
    if (!this.now_timer) {
      this.getNowTime();
    }
    this.account = JSON.parse(sessionStorage.getItem("account"));
    this.unitOrg = JSON.parse(sessionStorage.getItem("org"));
    this.getOrgTree();
    this.getLeftDutyClock({ unitId: this.unitOrg.orgId, unitName: this.unitOrg.orgName });
  },
  beforeDestroy() {
    if (this.now_timer) {
      clearTimeout(this.now_timer);
      this.now_timer = null;
    }
  },
  watch: {
    tiemDate: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$emit("getDate", newVal);
          this.getTableData();
        });
      },
      immediate: true

    }
  },
  methods: {
    rightDetail(id) {
      this.$emit("getDate", this.tiemDate, { userId: id });
    },
    getParseStamp(date = new Date(), format = "YYYY年MM月DD日") {
      return parseStamp(date, format);
    },
    getNowTime() {
      this.now = this.getParseStamp(new Date(), "HH:mm:ss");
      this.now_timer = setTimeout(() => {
        this.getNowTime();
      }, 1000);
    },
    // 获取单位组织结构树
    async getOrgTree() {
      const res = await getUntilList({ orgId: this.unitOrg.orgId });
      if (res) {
        this.formData[0].treeData.attrs.data = res;
      }
    },
    // 查询
    query() {
      this.getTableData();
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.getTableData();
    },
    handleClick() {
      this.tabsList = {
        tableData: [],
        shiftTimeString: ""
      };
      switch (this.activeName) {
        case "值班计划":
          this.tableConfig = jhTableConfig;
          this.$emit("cutFrom", this.activeName);
          this.$emit("getDate", this.tiemDate);
          this.searchShow = true;
          this.activeNum = 1;
          this.getLeftDutyPlan();
          break;
        case "值班打卡":
          this.tableConfig = dkTableConfig;
          this.$emit("cutFrom", this.activeName);
          this.searchShow = false;
          this.activeNum = 1;
          this.tiemDate = new Date();
          break;
        case "值班日报":
          this.tableConfig = rbTableConfig;
          this.$emit("cutFrom", this.activeName);
          this.$emit("getDate", this.tiemDate);
          this.searchShow = true;
          this.activeNum = 2;
          this.getLeftDutyNewspaper({ type: 2 });
          break;
        case "值班日志":
          this.tableConfig = rbTableConfig;
          this.$emit("cutFrom", this.activeName);
          this.$emit("getDate", this.tiemDate);
          this.searchShow = true;
          this.activeNum = 1;
          this.getLeftDutyNewspaper({ type: 1 });
          break;
        case "交接班":
          this.tableConfig = jbTableConfig;
          this.$emit("cutFrom", this.activeName);
          this.searchShow = false;
          this.activeNum = 1;
          this.tiemDate = new Date();
          break;
        default:
          break;
      }
    },
    // 预览弹窗关闭
    closePreviewDialog() {
      this.previewDialog.isShow = false;
      this.previewData = {};
    },
    // 交接班弹窗关闭
    closeHandoverDialog() {
      this.handover_dialog.isShow = false;
    },
    handoverBtn(item) {
      this[item.id]();
    },
    mergeTable(spanName, tableData) {
      this.spanArr = [];
      this.position = 0;
      spanName.forEach((arr) => {
        tableData.map((data, index) => {
          // 当前为第一行的时候
          if (index === 0) {
            this.spanArr.push(1);
            this.position = 0;
          } else {
            // 如果说当前行与上一行是相同的数据
            if (tableData[index][spanName] === tableData[index - 1][spanName]) {
              this.spanArr[this.position] += 1; // 上一行的合并数+1
              this.spanArr.push(0); // 当前行的合并数是0
            } else {
              // 如果说当前行与上一行不相同  那么两个都不进行合并所以返回1，索引变成当前行索引
              this.spanArr.push(1);
              this.position = index;
            }
          }
        });
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
      if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return [_row, _col];
      } else {
        return [1, 1];
      }
    },
    //  签到
    async dutySignIn() {
      const date = this.getParseStamp(this.tiemDate, "YYYY-MM-DD");
      const res = await dutySignIn({ id: this.account.id, signType: 1, date });
      console.log("xx", res);
      if (res) {
        this.$message({
          message: "签到成功",
          type: "success"
        });
        this.getLeftDutyClock({ unitId: this.unitOrg.orgId, unitName: this.unitOrg.orgName });
      } else {
        this.$message.error({ message: "签到失败" });
      }
    },
    // 签退
    signOut() {
      this.$confirm(`是否确认签退?`, "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning"
      }).then(async () => {
        const date = this.getParseStamp(this.tiemDate, "YYYY-MM-DD");
        const res = await dutySignOut({ id: this.account.id, signType: 1, date });
        if (res) {
          this.$message({
            message: `签退成功`,
            type: "success"
          });
          this.getLeftDutyClock({ unitId: this.unitOrg.orgId, unitName: this.unitOrg.orgName });
        } else {
          this.$message.error({ message: res.msg });
        }
      }).catch((err) => {
        console.log(err);
      });

    },
    async downloadWord(id) {
      let dataWord = await this.getDetail({ userId: id });
      dataWord = this.dataTransition(dataWord);
      dataWord.dutyPersonName = dataWord.creator;
      dataWord.dutyDirectorName = dataWord.approvalUser;
      // 判断有无附加商品来选择word模版
      // 读取并获得模板文件的二进制内容
      const file = process.env.VUE_APP_BASE_API + (this.activeName == "值班日报" ? "file/dutyDaily.docx" : "file/logbook.docx");
      JSZipUtils.getBinaryContent(file, function (error, content) {
        console.log("-----", content);
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例，内容为模板的内容
        const zip = new JSZip(content);
        console.log("+++++", zip);
        // 创建并加载docxtemplater实例对象
        const doc = new Docxtemplater();
        console.log("/////", doc);
        doc.loadZip(zip);
        console.log("=====", doc);
        // 设置模板变量的值
        // doc.setData(_this.dataWord);

        doc.setData(dataWord);
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          };
          console.log(JSON.stringify({ error: e }));
          throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        const out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, dataWord.reportName);
      });

    },
    dataTransition(data) {
      Object.keys(data).forEach(key => {
        if (data[key] instanceof Array && data[key].length > 0) {
          data[key].map(d => {
            Object.keys(d).forEach((k) => { d[k] = d[k] || ""; });
          });
        }
      });
      return data;
    },
    // 预览
    async preview(id) {
      this.previewDialog.title = this.activeName;
      this.previewType = this.activeName == "值班日报" ? "DutyDaily" : "DutyLog";
      this.previewDialog.isShow = true;
      this.previewData = await this.getDetail({ userId: id });
    },
    async getDetail(data) {
      const reportDate = this.getParseStamp(this.tiemDate, "YYYY-MM-DD");
      const type = this.activeName == "值班日报" ? 2 : 1;
      const params = { userId: this.account.id, reportDate, type, dutyType: "1" };
      const res = await getDetail(Object.assign(params, data));
      if (res) {
        res?.dutyDailyDrillList.forEach((item, i) => {
          item.index = i + 1;
        });
        res?.dutyDailyResourceList.forEach((item, i) => {
          item.index = i + 1;
        });
        res.dutyDailyInfectionStatusList ? res.dutyDailyInfectionStatusList.forEach((item, i) => {
          item.marketingExistingDiagnosis = getExistingNum(item);
          item.marketingExistingSuspected = getAddNum(item);
        }) : [];
        return res;
      }
    },
    // 交班
    async handover(e, id) {
      // 1 接班  2交班   3详情
      this.handoverId = id;
      const parmas = {
        checkDate: this.getParseStamp(this.tiemDate, "YYYY-MM-DD"),
        unitId: this.form.unitId ? this.form.unitId : this.unitOrg.orgId,
        unitName: this.form.unitName ? this.form.unitName : this.unitOrg.orgName
      };
      const res = await getShiftTableApi(parmas);
      if (res) {
        this.handoverType = e;
        this.connectDialog = {
          unit: res.unit,
          dutyPhone: res.dutyPhone
        };
        this.mergeTable(["handoverShifts"], res.leftDutyHandoverList);
        this.handoverData = res.leftDutyHandoverList;
        const btnList = [];
        if (e == 1) {
          btnList.push({
            name: "接班",
            id: "receiveBtn",
            size: "small"
          });
        } else if (e == 2) {
          btnList.push({
            name: "交班",
            id: "overBtn",
            type: "primary",
            size: "small"
          });
        }
        this.handover_dialog.btnList = btnList;
        this.handover_dialog.isShow = true;
      }
    },
    // 交班按钮
    overBtn() {
      this.dutyShift(1, "交班成功");
    },
    // 接班按钮
    receiveBtn() {
      this.dutyShift(2, "接班成功");
    },
    async dutyShift(type, msg) {
      try {
        const res = await dutyShift({ ids: this.handoverId, shiftConsiderations: this.shiftConsiderations, type });
        if (res) {
          this.$message({
            message: msg,
            type: "success"
          });
          this.handover_dialog.isShow = false;
          this.getTableData();
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 数组处理，相同的放一起
    trans(data) {
      const cache = {}; // cache存储的键是eid，值是这个eid在indices数组中的下标
      const indices = []; // 数组中的每一个值是一个数组，数组中的每一个元素是原数组中相同eid的下标
      data.forEach((item, i) => {
        const eid = item.eid;
        const index = cache[eid];
        if (index !== undefined) {
          indices[index].push(i);
        } else {
          cache[eid] = indices.length;
          indices.push([i]);
        }
      });
      /**
   * 此时，cache：{cat: 0, dog: 1, pig: 2}
   * indices: [[0, 1, 3, 5], [2, 6], [4]]
   * indices中的第1项是eid为cat的数组下标
   * indices中的第2项是eid为dog的数组下标
   * indices中的第3项是eid为pig的数组下标
   */
      const result = [];
      indices.forEach(item => {
        item.forEach(index => {
          result.push(data[index]); // 依次把index对应的元素data[index]添加进去即可
        });
      });

      return result;
    },
    nullToStr(data) {
      for (var x in data) {
        if (data[x] === null) { // 如果是null 把直接内容转为 ‘’
          data[x] = "";
        } else {
          if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
            data[x] = data[x].map(z => {
              return this.nullToStr(z);
            });
          }
          if (typeof (data[x]) === "object") { // 是json 递归继续处理
            data[x] = this.nullToStr(data[x]);
          }
        }
      }
      return data;
    },
    getTableData() {
      if (this.activeName == "值班计划") {
        this.getLeftDutyPlan();
      } else if (this.activeName == "值班打卡") {
        this.getLeftDutyClock();
      } else if (this.activeName == "值班日报" || this.activeName == "值班日志") {
        const type = this.activeName == "值班日报" ? 2 : 1;
        this.getLeftDutyNewspaper({ type });
      } else if (this.activeName == "交接班") {
        this.getLeftDutyHandover();
      }
    },
    // 值班计划
    async getLeftDutyPlan() {
      const params = {
        checkDate: this.getParseStamp(this.tiemDate, "YYYY-MM-DD"),
        dutyPersonId: this.account.id,
        dutyType: 1,
        type: this.activeNum,
        unitId: this.form.unitId ? this.form.unitId : this.unitOrg.orgId,
        unitName: this.form.unitName ? this.form.unitName : this.unitOrg.orgName
      };
      const res = await getLeftDutyPlan(params);
      if (res) {
        this.dutyMsg = {
          dutyPhone: res.dutyPhone,
          dutyUnit: res.dutyUnit
        };
        this.tabsList = res?.leftDutyPlanList.map(item => {
          return {
            tableData: item.leftDutyPlanInteriorList || [],
            shiftTimeString: item.shiftTimeString
          };
        });
      }
    },
    // 值班打卡
    async getLeftDutyClock(data) {
      const params = {
        checkDate: this.getParseStamp(this.tiemDate, "YYYY-MM-DD"),
        dutyPersonId: this.account.id,
        dutyType: 1,
        type: this.activeNum,
        unitId: this.form.unitId ? this.form.unitId : this.unitOrg.orgId,
        unitName: this.form.unitName ? this.form.unitName : this.unitOrg.orgName,
        ...data
      };
      const res = await getLeftDutyClock(params);
      if (res) {
        if (res.leftDutyClockList && res.leftDutyClockList.length > 0) {
          const obj = res.leftDutyClockList.find(item => item.dutyPersonId == this.account.id);
          this.signBut = !obj?.signTime;
          this.signOutBut = obj.signTime && !obj.signOutTime;
          this.accomplishBut = obj.signTime && obj.signOutTime;
        }
        if (this.activeName == "值班打卡") {
          this.dutyMsg = {
            dutyPhone: res.dutyPhone,
            dutyUnit: res.dutyUnit
          };
          this.tabsList = [{
            tableData: res.leftDutyClockList || [],
            shiftTimeString: "[日常值班]  值班 08:30-次日08:30"
          }];
        }
      }
    },
    // 值班日志
    async getLeftDutyNewspaper(data) {
      const params = {
        checkDate: this.getParseStamp(this.tiemDate, "YYYY-MM-DD"),
        dutyPersonId: this.account.id,
        type: this.activeNum,
        dutyType: 1,
        unitId: this.form.unitId ? this.form.unitId : this.unitOrg.orgId,
        unitName: this.form.unitName ? this.form.unitName : this.unitOrg.orgName
      };
      const res = await getLeftDutyNewspaper(Object.assign(params, data));
      if (res) {
        this.dutyMsg = {
          dutyPhone: res.dutyPhone,
          dutyUnit: res.dutyUnit
        };
        this.tabsList = [{
          tableData: res.leftDutyNewspaperList || [],
          shiftTimeString: "[日常值班]  值班 08:30-次日08:30"
        }];
      }
    },
    // 交接班
    async getLeftDutyHandover() {
      const params = {
        checkDate: this.getParseStamp(this.tiemDate, "YYYY-MM-DD"),
        dutyPersonId: this.account.id,
        dutyType: 1,
        type: this.activeNum,
        unitId: this.form.unitId ? this.form.unitId : this.unitOrg.orgId,
        unitName: this.form.unitName ? this.form.unitName : this.unitOrg.orgName
      };
      const res = await getLeftDutyHandover(params);
      if (res) {
        this.dutyMsg = {
          dutyPhone: res.dutyPhone,
          dutyUnit: res.dutyUnit
        };
        this.tabsList = [{
          tableData: res.leftDutyHandoverList || [],
          shiftTimeString: "[日常值班]  值班 08:30-次日08:30"
        }];
      }
    }
  }

};
</script>
<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
}

.time {
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  color: #333;

  .time-data {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
  }

  .now {
    padding: 20px 0 20px 90px;
    display: flex;
    justify-content: space-evenly;

    >span {
      font-size: 35px;
      font-weight: 700;
    }

    >.el-button {
      font-size: 21px;
      padding: 5px 15px;
    }

    img {
      height: 23px;
      width: 21px;
      vertical-align: text-top;
      margin-right: 10px;
    }

    .sign {
      color: #1B8015;
      background: rgba(134, 255, 126, 0.4);
      border: 1px solid #1ED511;
    }

    .signOut {
      color: #135F68;
      background: rgba(60, 236, 255, 0.4);
      border: 1px solid #20B7C8;
    }
  }
}

.box {
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;

  :deep(.el-calendar__header) {
    display: none;
  }

  :deep(.el-calendar-table td.is-selected) {
    background-color: #3a7bfc;

    .el-calendar-day {
      color: #fff;
    }
  }

  :deep(.el-calendar__body) {
    padding: 0;
    margin-bottom: 20px;

    thead {
      display: none;
    }

    .el-calendar-day {
      height: 50px;
      line-height: 50px;
      text-align: center;
      padding: 0;
      color: #3a7bfc;
      font-size: 20px;
      font-weight: 700;

      &:hover {
        background-color: transparent;
      }
    }
  }

  .cut-tabs {
    :deep(.el-calendar__body) {
      tbody {
        td {
          pointer-events: none;
        }
      }
    }
  }

  .calendar-date {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #a5b8fe;
    border: 1px solid #d7d7d7;
    box-sizing: border-box;

    > :deep(.el-date-editor) {
      font-size: 28px;

      .el-input__inner {
        font-weight: 700;
        color: #000;
        background-color: #a5b8fe;
        border: 0;
      }
    }
  }

  .calendar-ul {
    display: flex;
    list-style: none;

    .calendar-li {
      flex: 1;
      text-align: center;
      height: 55px;
      line-height: 55px;
      font-size: 16px;
      font-weight: 700;
      background-color: #cfdbff;
      border-right: 1px solid #d7d7d7;
      box-sizing: border-box;
    }
  }
}

.inquire {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .filterTitle {
    min-height: 100px !important;
  }

  .form {
    :deep(.el-form-item) {
      margin: 0;

      label {
        font-size: 16px;
      }
    }
  }
}

:deep(.el-tabs__item) {
  font-size: 18px;
}

.tabs {
  .tabs-data {
    .tabs-title {
      display: flex;
      margin-bottom: 20px;
    }

    .blue {
      width: 4px;
      background-color: rgba(53, 97, 253, 1);
      border-radius: 6px;
      margin-right: 15px;
    }
  }

  .tabs-txt {
    font-size: 20px;
    font-weight: 700;
  }

  .tabs-label {
    margin-bottom: 20px;
  }

  .density {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 20px;
  }
}

:deep(.table-bg) {
  border: none;
  background-color: #fff;
}

.hover {
  cursor: pointer;
  color: #3561fd;
  text-decoration: underline;
}
</style>
